<template>
  <span class="voice_container" @click="play">
    <span class="flex h hc vc">
      <image
        :src="playing ? 'http://down.qwdata.vip/app_icon/1672819221036' : 'http://down.qwdata.vip/app_icon/1672819588238'"
        class="icon"></image>
      <text :class="[playing ? 'collectionColorSelect' : 'collectionColor', 'label']">读题</text>
    </span>
  </span>
</template>

<script>
import audioHelper from "@/libs/audioHelper";
import questionCache from "@/libs/questionCache";
import statisticsEventUtils from "../../libs/statisticsEventUtils";

export default {
  name: 'VoicePlayer',
  props: ['questionId', 'index', 'mode', 'vip', 'storeId'],
  data() {
    return {
      playing: false,
      readRightAnswer: false
    }
  },
  created() {
    audioHelper.getInstance().addStatusChange((id, status) => {
      if (id === this.questionId) {
        this.playing = status
      } else {
        this.playing = false
      }
    })
  },
  watch: {
    mode(newVal) {
      this.readRightAnswer = newVal === 'recite'
    }
  },
  methods: {
    play() {
      if (this.playing) {
        audioHelper.getInstance().stopQuestion()
        return
      }
      // statisticsEventUtils.onEvent('clickYuyin')
      const question = questionCache.getStore(this.storeId).getQuestion(this.index)
      audioHelper.getInstance().playQuestion(question, this.readRightAnswer, this.vip)
    }
  }
}
</script>

<style lang='scss'>
.voice_container {
  font-size: 14px;
  display: inline-block;

  .icon {
    width: 32rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }

  .collectionColor {
    color: #8D8D8D;
  }

  .collectionColorSelect {
    color: #10D0B1;
  }
  .label {
    margin-bottom: 2rpx;
  }
}
</style>
